<template>
	<view class="comp-custom-nav" :style="paddingTopStyle">
		<view class="nav-body">
			<!-- <slot> -->
				<view class="box-defaultTitle">
					<image v-if="showBackArrow" class="icon-arrow" mode="heightFix" src="/static/icon_back30.png" @tap="handleBack"></image>
					<text class="box-title-my" :style="[boxTitleStyle]">{{title}}</text>
					<image src="/static/setting@3x.png" class="icon-setting" @tap="handleToSet" :style="settingStyle"></image>
				</view>
			<!-- </slot> -->
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		getNavHeightTop
	} from "@/stores/navStore.js"
	let settingStyle=ref({})
	let boxTitleStyle=ref({paddingLeft:'10rpx'})
	// #ifdef MP-WEIXIN
	let rpx10=uni.upx2px(10);
	let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
	let systemInfo=uni.getSystemInfoSync()
	settingStyle.value={
		marginRight:`${systemInfo.screenWidth - menuButtonInfo.left+rpx10}px`
	}
	boxTitleStyle.value={paddingLeft:systemInfo.screenWidth - menuButtonInfo.left+rpx10-uni.upx2px(30)}
	// #endif
	const props = defineProps({
		title: {
			type: String,
			default: '出门旅行参考'
		},
		showBackArrow: {
			type: Boolean,
			default: false
		},
		backFunc:{
			type:Function,
			default:()=>{}
		}
	})
	let navHeightInfo = getNavHeightTop();
	const paddingTop = navHeightInfo.statusBarHeight;
	const paddingTopStyle = ref({
		"paddingTop": `${paddingTop}px`
	})
	const handleBack=()=>{
		if(props.backFunc){
			props.backFunc();
			return;
		}
		uni.navigateBack()
	}
	const handleToSet=()=>{
		uni.navigateTo({
			url:'/pages/setting/index'
		})
	}
</script>

<style lang="less" scoped>
	
	.comp-custom-nav {
		position: fixed;
		width: 100%;
		top: 0;

		background: #182836;
		left: 0;
		box-sizing: border-box;
		z-index: 4;
		font-size: 36rpx;
		// font-family: PingFang SC;
		font-weight: 600;
		color: #FFFFFF;

		.nav-body {
			position: relative;
			width: 100%;
			height: 88rpx;
			overflow: hidden;

			.box-defaultTitle {
				position: relative;
				width: 100%;
				height: 88rpx;
				font-size: 36rpx;
				line-height: 88rpx;
				text-align: center;
				display: flex;
				display: -webkit-flex;
				flex-direction: row;
				align-items: center;
				padding-left: 32rpx;
				padding-right: 32rpx;
				box-sizing: border-box;
				.icon-arrow{
					position: relative;
					width: 30rpx;
					height: 30rpx;
					vertical-align: top;
					flex-shrink: 0;
				}
				.box-title-my{
					position: relative;
					flex: 1;
					// width: 100rpx;
					/*  #ifdef  APP-PLUS  */
					text-align: center;
					/*  #endif  */
					/*  #ifndef  APP-PLUS  */
					text-align: left;
					/*  #endif  */
				
					overflow: hidden;
					flex-shrink: 0;
				}
				.icon-setting{
					position: relative;
					width: 42rpx;
					height: 42rpx;
					margin-right: 10rpx;
					flex-shrink: 0;
				}
			}
		}

	}
</style>